import "@/App.css";

import "./index.scss";
import time1 from "@/utils/formData";
import { Flex, DatePicker, message, Button, DatePickerProps } from "antd";

import { useEffect, useState } from "react";
import dayjs from "dayjs";
const { RangePicker } = DatePicker;


// import { useImmer } from "use-immer";
// 函数式组件  无状态
function home() {
  const [uPDtime, setDPDtime] = useState({
    type: 0,
    startDate: "",
    endDte: "",
  });

  const [messageApi, contextHolder] = message.useMessage();


  const key = "sgosulgjlb";

  // 获取统计数据 访问量和医生访问记录
  const getCarhtData = async () => {
    messageApi.open({
      key,
      type: "loading",
      content: "加载中...",
      duration: 0,
    });
   

    // 获取医生访问量

    messageApi.destroy();
  };
  const [defaultValue, setDEfaultValue] = useState<any>([]);
  // 获取日期
  const onChangeTime = (e: any) => {
    if (e.length > 0) {
      let start = dayjs(e[0]).format("YYYY-MM-DD");
      let endsart = dayjs(e[1]).format("YYYY-MM-DD");
      setDPDtime({ ...uPDtime, startDate: start, endDte: endsart });
      // getCarhtData();
      setDEfaultValue([e[0], e[1]]);
    }
  };
  // 日期输入限制
  const disabled7DaysDate: DatePickerProps["disabledDate"] = (
    current,
    { from }
  ) => {
    if (from) {
      return Math.abs(current.diff(from, "days")) >= 30;
    }

    return false;
  };
  // 表格数据

  // const [config, setConfig] = useImmer({
  //   data: [],
  //   xField: "days",
  //   yField: "num",
  //   scrollbar: {
  //     x: {
  //       ratio: 1,
  //     },
  //   },
  //   yAxis: {
  //     min: 0,
  //   },
  //   group: true,
  //   style: {
  //     maxWidth: 40,
  //     // 矩形单个方向的内边距
  //   },
  // });
  // setConfig({
  //   data: [],
  //   xField: "days",
  //   yField: "num",
  //   scrollbar: {
  //     x: {
  //       ratio: 1,
  //     },
  //   },
  //   yAxis: {
  //     min: 0,
  //   },
  //   group: true,
  //   style: {
  //     maxWidth: 40,
  //     // 矩形单个方向的内边距
  //   },
  // })
  // console.log(config)
  useEffect(() => {
    // getCarhtData();
    if (defaultValue.length > 0) {
      getCarhtData();
    }
  }, [defaultValue]);
  // end表格数据
  useEffect(() => {
    let time145 = time1(30);
    let itm = [];
    itm.push(dayjs(time145.timeEd));
    itm.push(dayjs(time145.nowTime));
    setDEfaultValue(itm);
    setDPDtime({
      ...uPDtime,
      startDate: time145.timeEd,
      endDte: time145.nowTime,
    });
  }, []);

  return (
    <>
      <div style={{ padding: "40px" }} className="userTj">
        {contextHolder}
        {/* <div>
          <Flex justify="center">
            <div style={{ fontSize: "17px" }}>注册统计</div>
          </Flex>
        </div> */}
        <div >
          <Flex justify="flex-start" align="center">
            {/* <span style={{color:"rgb(231 18 18)",marginLeft:"2px"}}>(0-30天以内)</span> */}
            <div>查询日期：</div>
              <div>
                <RangePicker
                  onChange={onChangeTime}
                  disabledDate={disabled7DaysDate}
                  value={defaultValue}
                />
              </div>
              <div style={{ marginLeft: "20px" }}>
                <Button type="primary">确定</Button>
              </div>
            {/* <div>
              <div>查询日期：</div>
              <div>
                <RangePicker
                  onChange={onChangeTime}
                  disabledDate={disabled7DaysDate}
                  value={defaultValue}
                />
              </div>
              <div style={{ marginLeft: "20px" }}>
                <Button type="primary">确定</Button>
              </div>
            </div> */}
          </Flex>
        </div>
        <div>
          <div
            style={{ textAlign: "left", marginTop: "20px", maxHeight: "700px" }}
          >
            <Flex>
              {/* style={{ width: "50%",maxHeight:"600px" }} */}
              <div style={{ width: "50%" }}>
                <div>注册统计</div>
                
              </div>
              <div style={{ width: "50%" }}>
                <div>下单统计</div>
                
              </div>
            </Flex>
          </div>
        </div>

       
        <div>
          <div
            style={{ textAlign: "left", marginTop: "20px", maxHeight: "700px" }}
          >
            <Flex>
              {/* style={{ width: "50%",maxHeight:"600px" }} */}
              <div style={{ width: "100%" }}>
                <div>访问统计</div>
                
              </div>
            </Flex>
          </div>
        </div>
      </div>
    </>
  );
}

export default home;
